<template>
  <view class="container">
    <page-head title="项目发布"></page-head>

    <!-- 合作类型 -->
    <view class="uni-title uni-common-pl">合作类型</view>
    <view class="uni-list">
      <view class="uni-list-cell">
        <view class="uni-list-cell-left">
          <text class="required">*</text>期望学科
        </view>
        <view class="uni-list-cell-db">
          <picker @change="bindSubjectChange" :value="subjectIndex" :range="subjectOptions">
            <view class="uni-input">{{subjectOptions[subjectIndex] || '请选择'}}</view>
          </picker>
        </view>
      </view>
    </view>

    <!-- 期望成果 -->
    <view class="uni-title uni-common-pl">期望成果</view>
    <view class="uni-list">
      <view class="uni-list-cell">
        <view class="uni-list-cell-left">
          <text class="required">*</text>开放程度
        </view>
        <view class="uni-list-cell-db">
          <picker @change="bindOpenLevelChange" :value="openLevelIndex" :range="openLevelOptions">
            <view class="uni-input">{{openLevelOptions[openLevelIndex] || '请选择'}}</view>
          </picker>
        </view>
      </view>
    </view>

    <!-- 项目信息 -->
    <view class="uni-title uni-common-pl">项目详情</view>
    <view class="uni-list">
      <view class="uni-list-cell">
        <view class="uni-list-cell-left">
          <text class="required">*</text>项目标题
        </view>
        <view class="uni-list-cell-db">
          <input class="uni-input" v-model="projectTitle" placeholder="请输入项目名称" />
        </view>
      </view>
      
      <view class="uni-list-cell multi-line">
        <view class="uni-list-cell-left">
          <text class="required">*</text>合作描述
        </view>
        <view class="uni-list-cell-db">
          <textarea 
            class="uni-textarea" 
            v-model="projectDesc" 
            placeholder="请输入合作详细描述"
            auto-height
          />
        </view>
      </view>
    </view>

    <!-- 合作方式 -->
    <view class="uni-title uni-common-pl">合作方式</view>
    <view class="uni-list">
      <view class="uni-list-cell">
        <view class="uni-list-cell-left">
          <text class="required">*</text>合作类型
        </view>
        <view class="uni-list-cell-db">
          <picker @change="bindCoopTypeChange" :value="coopTypeIndex" :range="coopTypeOptions">
            <view class="uni-input">{{coopTypeOptions[coopTypeIndex] || '请选择'}}</view>
          </picker>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="btn submit" @click="submitProject">提交发布</button>
    </view>

    <!-- 导航栏 -->
    <custom-tabbar :current="1"/> <!-- 假设合作意愿平台是第二个导航项 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 选择器数据
      subjectOptions: ['计算机科学', '生物医学', '材料工程', '环境科学'],
      subjectIndex: -1,
      openLevelOptions: ['完全公开', '部分公开', '暂不公开'],
      openLevelIndex: -1,
      coopTypeOptions: ['科研合作', '教学合作', '人才联合培养'],
      coopTypeIndex: -1,
      
      // 输入数据
      projectTitle: '',
      projectDesc: ''
    }
  },
  methods: {
    bindSubjectChange(e) {
      this.subjectIndex = e.detail.value
    },
    bindOpenLevelChange(e) {
      this.openLevelIndex = e.detail.value
    },
    bindCoopTypeChange(e) {
      this.coopTypeIndex = e.detail.value
    },
    submitProject() {
      const projectData = {
        subject: this.subjectOptions[this.subjectIndex],
        openLevel: this.openLevelOptions[this.openLevelIndex],
        coopType: this.coopTypeOptions[this.coopTypeIndex],
        title: this.projectTitle,
        desc: this.projectDesc
      }
      console.log('项目提交数据：', projectData)
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      })
      // 实际开发中此处应调用提交API
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  padding-bottom: 160rpx;
}

.required {
  color: #e64340;
  margin-right: 8rpx;
}

.uni-list-cell {
  border-bottom: 1rpx solid #eee;
  padding: 24rpx 0;
  align-items: flex-start;
}

.uni-list-cell.multi-line {
  min-height: 160rpx;
}

.uni-list-cell-left {
  width: 220rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 1.4;
}

.uni-input {
  text-align: right;
  color: #333;
  font-size: 28rpx;
}

.uni-textarea {
  width: 100%;
  min-height: 160rpx;
  font-size: 28rpx;
  color: #333;
  text-align: left;
  padding: 16rpx 0;
}

.action-buttons {
  margin: 40rpx 20rpx 0;
}

.btn.submit {
  background: #007AFF;
  color: white;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 8rpx;
  font-size: 32rpx;
}
</style>